<template>
  <Card>
    <div id="baseSettings">
      <div class="from">
        <Form ref="addForm" :label-width="170" :model="form" :rules="formValidate" inline>
          <div class="fromTitle">驾驶员工资</div>
          <Row>
            <Col span="10">
            <FormItem label="修车补助金额：" prop="driver_fix_bus">
              <Input v-model="form.driver_fix_bus" placeholder="输入修车补助金额"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="降温费：" prop="driver_cooling_fee">
              <Input v-model="form.driver_cooling_fee" placeholder="输入降温费"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="生效时间：" prop="driver_effective_date">
              <DatePicker
                v-model="form.driver_effective_date"
                format="yyyy-MM-dd"
                placeholder="请选择生效时间"
                placement="bottom-start"
                type="daterange"
                @on-change="form.driver_effective_date=$event"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="工会会费：" prop="driver_union_fee">
              <Input v-model="form.driver_union_fee" placeholder="输入工会会费"/>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">行政人员工资</div>
          <Row>
            <Col span="10">
            <FormItem label="降温费：" prop="admin_cooling_fee">
              <Input v-model="form.admin_cooling_fee" placeholder="输入降温费"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="生效时间：" prop="admin_effective_date">
              <DatePicker
                v-model="form.admin_effective_date"
                format="yyyy-MM-dd"
                placeholder="请选择生效时间"
                placement="bottom-start"
                type="daterange"
                @on-change="form.admin_effective_date=$event"
              ></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="工会会费：" prop="admin_union_fee">
              <Input v-model="form.admin_union_fee" placeholder="输入工会会费"/>
            </FormItem>
            </Col>
          </Row>
          <div class="fromItem">
            <FormItem label>
              <Button
                :loading="submitLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmit"
              >保存
              </Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </Card>
</template>
<script>
import './baseSettings.css'
import {getPaySettings, saveSettings} from '../../api/settings'

export default {
  data() {
    return {
      form: {
        driver_fix_bus: '',
        driver_cooling_fee: '',
        driver_effective_date: [null, null],
        driver_union_fee: '',
        admin_cooling_fee: '',
        admin_effective_date: [null, null],
        admin_union_fee: ''
      },
      formValidate: {},
      submitLoading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getSettings()
    },
    getSettings() {
      getPaySettings().then(res => {
        if (res.data.result) {
          this.form = res.data.result
        }
      })
    },
    handleSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          saveSettings(this.form).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
</style>
